<template>
	<view class="mine-index">
		<!-- 背景图片 -->
		<image class="image-bg" :src="backgroundUrl"></image>
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<navBar :title="'我的'" :buttonStatus="false"></navBar>
		</view>
		<view class="mine-content">
			<view class="top-content">
				<view class="left">
					<view class="name-grade">
						<view class="name">{{ user.name }}</view>
						<view class="level_img">
							<image class="grade-background" src="/static/images/mine/team/grade_background.png"
								mode="widthFix"></image>
							<view class="grade">{{ user.grade }}</view>
						</view>
					</view>
				</view>
				<view class="right">
					<image class="avatar" src="/static/images/mine/avatar.png" mode="widthFix"></image>
					<!-- <view class="button">
						<view class="button-text">查看资料</view>
					</view>
					<view class="level">
						<view class="level-name">{{ user.levelName }}</view>
						<view class="partner-name" v-if="user.partnerName != ''">合伙人等级: {{ user.partnerName }}</view>
					</view> -->
				</view>
			</view>
			<view class="bottom-item">
				<view class="show-item" @tap="navigateWallet">
					<view class="show-item-name">余额</view>
					<view class="show-item-number">{{ user.money }}</view>
				</view>
				<view class="show-item" @tap="navigateReward">
					<view class="show-item-name">佣金</view>
					<view class="show-item-number">{{ user.reward }}</view>
				</view>
				<view class="show-item" @tap="navigateIntegral">
					<view class="show-item-name">推广积分</view>
					<view class="show-item-number">{{ user.integral }}</view>
				</view>
			</view>
			<view class="laber-item">抢购订单</view>
			<view class="button-group-two">
				<view class="button-group-bottom-three">
					<view class="button-style" @click="navigatePurchase(0)">
						<image class="button" src="/static/images/mine/order_01.png" mode="widthFix"></image>
						<view class="button-text">全部</view>
						<view class="tips" v-if="numbertipsTwo != ''">{{ numbertipsTwo }}</view>
					</view>
					<view class="button-style" @click="navigatePurchase(1)">
						<image class="button" src="/static/images/mine/order_02.png" mode="widthFix"></image>
						<view class="button-text">销售中</view>
					</view>
					<view class="button-style" @click="navigatePurchase(2)">
						<image class="button" src="/static/images/mine/order_03.png" mode="widthFix"></image>
						<view class="button-text">已完成</view>
					</view>
				</view>
			</view>
			<view class="laber-item">商品订单</view>
			<view class="button-group-two">
				<view class="button-group-bottom-two">
					<view class="button-style" @click="navigateBuy(1)">
						<image class="button" src="/static/images/mine/order_04.png" mode="widthFix"></image>
						<view class="button-text">待付款</view>
						<view class="tips" v-if="numbertips != ''">{{ numbertips }}</view>
					</view>
					<view class="button-style" @click="navigateBuy(2)">
						<image class="button" src="/static/images/mine/order_05.png" mode="widthFix"></image>
						<view class="button-text">待发货</view>
					</view>
					<view class="button-style" @click="navigateBuy(3)">
						<image class="button" src="/static/images/mine/order_06.png" mode="widthFix"></image>
						<view class="button-text">已取消</view>
					</view>
					<view class="button-style" @click="navigateBuy(4)">
						<image class="button" src="/static/images/mine/order_07.png" mode="widthFix"></image>
						<view class="button-text">已完成</view>
					</view>
				</view>
			</view>
			<view class="laber-item">基本功能</view>
			<view class="button-group">
				<view class="button-group-bottom">
					<view class="button-style" @tap="navigatePoster">
						<image class="button" src="/static/images/mine/function_01.png" mode="widthFix"></image>
						<view class="button-text">邀请好友</view>
					</view>
					<view class="button-style" @tap="navigateTeam">
						<image class="button" src="/static/images/mine/function_02.png" mode="widthFix"></image>
						<view class="button-text">我的团队</view>
					</view>
					<view class="button-style" @tap="navigateNews">
						<image class="button" src="/static/images/mine/function_03.png" mode="widthFix"></image>
						<view class="button-text">系统公告</view>
					</view>
					<view class="button-style" @tap="navigateAddress(1)">
						<image class="button" src="/static/images/mine/function_04.png" mode="widthFix"></image>
						<view class="button-text">收货地址</view>
					</view>
				</view>
				<view class="button-group-bottom">
					<view class="button-style" @tap="navigateReceipt">
						<image class="button" src="/static/images/mine/function_05.png" mode="widthFix"></image>
						<view class="button-text">收款设置</view>
					</view>
					<view class="button-style" @tap="">
						<image class="button" src="/static/images/mine/function_06.png" mode="widthFix"></image>
						<view class="button-text">密码重置</view>
					</view>
					<view class="button-style" @tap="navigatePayNumber">
						<image class="button" src="/static/images/mine/function_07.png" mode="widthFix"></image>
						<view class="button-text">支付密码</view>
					</view>
					<view class="button-style" @tap="navigateService()">
						<image class="button" src="/static/images/mine/function_08.png" mode="widthFix"></image>
						<view class="button-text">咨询客服</view>
					</view>
				</view>
				<view class="button-group-bottom">
					<view class="button-style" @tap="userOut">
						<image class="button" src="/static/images/mine/function_09.png" mode="widthFix"></image>
						<view class="button-text">退出登录</view>
					</view>
					<view class="button-style"></view>
					<view class="button-style"></view>
					<view class="button-style"></view>
				</view>
			</view>

			<!-- 退出登录弹窗 -->
			<view class="loginOut-mask" v-if="showTips" @touchmove.stop.prevent>
				<u-transition :show="showTips">
					<view class="modal-bg-box">
						<view class="title">提示</view>
						<view class="inner-box">
							<text class="text-tips" :selectable="false">{{ tips }}</text>
							<view class="button-box">
								<view class="button-one" @click="cancel">取消</view>
								<view class="button-two" @click="confirmLoginOut">确定</view>
							</view>
						</view>
					</view>
				</u-transition>
			</view>
		</view>
		<view class="bottom-occupy"></view>
	</view>
</template>

<script>
	import Fn from '@/common/public.js';
	import {
		loginOut,
		GETuserinfo
	} from '@/common/api.js';
	import navBar from "@/components/NavBar.vue" // 导入顶部导航
	export default {
		components: {
			navBar
		},
		data() {
			return {
				/* 个人主页背景图片 */
				backgroundUrl: '/static/images/mine/background.png', // 背景图片

				/* 顶部导航栏高度 */
				navBarHeight: '',

				/* 用户个人信息 */
				user: {
					name: '~ 暂未登录 ~', // 姓名
					phone: '~', // 手机号
					levelName: '', // 会员级别名称
					partnerName: '', // 合伙人级别名称
					buyOrder: '0', // 买单
					sellOrder: '0', // 卖单
					advertisingNumber: '0', // 绿色积分
					balance: '0', // 钱包抢购分
					userId: '000000', // 用户ID
					asset: '0', // 资产

					grade: 'Lv1', // 会员级别
					money: '17.00', // 余额
					reward: '18.00', // 佣金
					integral: '19.00', // 推广积分
				}, // 用户信息
				numbertips: '', // 数量
				numbertipsTwo: '', // 数量二

				/* 弹窗 */
				tips: '是否要退出登录?', // 弹窗提示
				showTips: false, // 退出登录弹窗状态
				message: '123'
			};
		},
		onReady() {
			// this.$refs.uNotify.show({
			// 	// top: 0,
			// 	type: 'success',
			// 	color: '#000',
			// 	bgColor: '#FCEBD9',
			// 	message: this.message,
			// 	duration: 1000,
			// 	fontSize: 20,
			// 	// safeAreaInsetTop: false
			// });

			// 也可以通过主题形式调用，如：
			// this.$refs.uNotify.primary('Primary主题')

			// 关闭 notify
			// this.$refs.uNotify.close()
		},
		onLoad() {
			// this.navBarHeight = Fn.navBarHeight();
		},
		onShow() {
			this.getUser(); // 获取用户信息
		},
		methods: {

			/* 获取用户信息 */
			getUser() {
				const that = this;
				const user_info = uni.getStorageSync('user_info');
				if (user_info) {
					const userInfo = JSON.parse(user_info);
					that.user.phone = userInfo.userPhone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'); // 隐藏3-6的数字
				};
				GETuserinfo().then((res) => {
					if (res.status === 1) {
						const result = res.data;
						// console.log(result);
						that.user.name = result.userName;
						that.user.levelName = result.levelname;
						that.user.partnerName = result.partner_name;
						that.numbertips = result.dai_payment;
						that.user.userId = result.userId;
						that.user.levelName = result.levelname;
						that.user.buyOrder = result.total_buyorder;
						that.user.sellOrder = result.total_sellorder;
						that.user.advertisingNumber = result.reputation_value;
						that.user.balance = result.drawMoney;
						that.user.asset = result.assets;
					} else {
						Fn.Toast(res.msg, 3, 1500);
					};
				});
			},

			/* 退出登录 */
			userOut() {
				this.showTips = true;
			},

			/* 取消提示 */
			cancel() {
				this.showTips = false;
			},

			/* 确认退出登录 */
			confirmLoginOut() {
				const that = this;
				loginOut().then((res) => {
					const result = res;
					if (result.status == 1) {
						Fn.Toast("退出成功", 3, 1500);
						// localStorage.getItem('token');
						uni.removeStorageSync('token');
						uni.removeStorageSync('user_info');
						// location.reload(); // web页面 - 刷新页面
						this.showTips = false;
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/login/login',
							})
						}, 1500);
					} else {
						Fn.Toast("退出失败，请稍后重试", 3, 1500);
						this.showTips = false;
					};
				});
			},

			/* 重新加载页面 */
			reload() {
				// 页面重载
				const pages = getCurrentPages();
				// 声明一个pages使用getCurrentPages方法
				const curPage = pages[pages.length - 1];
				// console.log(curPage);
				// 声明一个当前页面
				// curPage.onLoad(curPage.options); // 传入参数
				// curPage.onLoad();
				// curPage.onShow();
				// curPage.onReady();
				// 执行刷新
			},

			/* 跳转至设置页面 */
			navigateSetting() {
				uni.navigateTo({
					url: '/pages/mine/setting/setting',
				});
			},

			/* 跳转至买单页面 */
			navigateBuy(id) {
				uni.navigateTo({
					url: '/pages/mine/buyOrder/buyOrder?id=' + id,
				});
			},

			/* 跳转至抢购订单页面 */
			navigatePurchase(id) {
				uni.navigateTo({
					url: '/pages/mine/purchaseOrder/purchaseOrder?id=' + id,
				});
			},

			/* 跳转至卖单页面 */
			navigateSell() {
				uni.navigateTo({
					url: '/pages/mine/sellOrder/sellOrder',
				});
			},

			/* 跳转至代金券页面 */
			navigateVoucher() {
				// uni.navigateTo({
				// 	url: '/pages/mine/voucher/voucher',
				// });
				// Fn.Toast('暂未开放', 3, 1500);
			},

			/* 跳转至广告分页面 */
			navigateCredit() {
				uni.navigateTo({
					url: '/pages/mine/credit/credit',
				});
			},

			/* 跳转至钱包页面 */
			navigateWallet() {
				uni.navigateTo({
					url: '/pages/mine/wallet/wallet',
				});
			},

			/* 跳转至地址页面 */
			navigateAddress(option) {
				uni.navigateTo({
					url: '/pages/mine/address/address?style=' + option,
				});
			},

			/* 跳转至收款设置页面 */
			navigateReceipt() {
				uni.navigateTo({
					url: '/pages/mine/receiptSetting/receiptSetting',
				});
			},

			/* 跳转至我的签约页面 */
			navigateSign() {
				// uni.navigateTo({
				// 	url: '/pages/mine/sign/sign',
				// });
				Fn.Toast('暂未开放', 3, 1500);
			},

			/* 跳转至登录页面 */
			navigateLogin() {
				// uni.navigateTo({
				// 	url: '/pages/login/login',
				// });
			},

			/* 跳转至邀请海报页面 */
			navigatePoster() {
				uni.navigateTo({
					url: '/pages/index/invite/invite',
				});
			},

			/* 跳转至分享奖励页面 */
			navigateShare() {
				uni.navigateTo({
					url: '/pages/share/share',
				})
			},

			/* 跳转至我的团队页面 */
			navigateTeam() {
				uni.navigateTo({
					url: '/pages/mine/team/team'
				})
			},
			/*跳转至支付密码页面*/
			navigatePayNumber(){
				uni.navigateTo({
					url: '/pages/mine/paynumber/paynumber'
				})
			},

			/* 跳转至资讯客服页面 */
			navigateService() {
				uni.navigateTo({
					url: '/pages/mine/service/service'
				})
			},

			/* 跳转至密码重置页面 */
			navigatePassword() {
				uni.navigateTo({
					url: '/pages/mine/resetPassword/resetPassword',
				})
			},

			/* 跳转至支付密码重置页面 */
			navigatePayPassword() {
				uni.navigateTo({
					url: '/pages/mine/resetPayPassword/resetPayPassword',
				})
			},

			/* 跳转至实名认证页面 */
			navigateAuthentication() {
				uni.navigateTo({
					url: '/pages/mine/authentication/authentication',
				})
			},

			/* 跳转至绿色积分明细页面 */
			navigateAssetDetail() {
				uni.navigateTo({
					url: '/pages/mine/wallet/assetDetail/assetDetail',
				});
			},

			/* 跳转至抢购分明细页面 */
			navigateDetail() {
				uni.navigateTo({
					url: '/pages/mine/wallet/walletDetail/walletDetail',
				});
			},

			/* 跳转至绿色积分明细页面 */
			navigateGreenIntegral() {
				uni.navigateTo({
					url: '/pages/mine/credit/creditDetail/creditDetail',
				});
			},

			/* 跳转至佣金提现页面 */
			navigateExtract() {
				uni.navigateTo({
					url: '/pages/share/extract/extract',
				});
			},

			/* 跳转至抢购分转赠页面 */
			navigateRewardPresent() {
				uni.navigateTo({
					url: '/pages/mine/wallet/rewardPresent/rewardPresent',
				});
			},

			/* 跳转至绿色积分转赠页面 */
			navigateGreenIntegralPresent() {
				uni.navigateTo({
					url: '/pages/mine/credit/present/present',
				});
			},
			
			/* 跳转至推广积分页面 */
			navigateIntegral() {
				uni.navigateTo({
					url: '/pages/mine/integral/integral',
				});
			},
			
			/* 跳转至佣金页面 */
			navigateReward() {
				uni.navigateTo({
					url: '/pages/mine/reward/reward',
				});
			},
			
			/* 跳转至系统公告页面 */
			navigateNews() {
				uni.navigateTo({
					url: '/pages/mine/systemNews/systemNews',
				});
			}
		}
	}
</script>

<style lang="scss">
	@import "@/static/css/mine.scss";

	.loginOut-mask {
		position: fixed;
		z-index: 1001;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);
		font-family: PingFang_Medium;

		.modal-bg-box {
			background-color: #FFFFFF;
			width: 580rpx;
			// height: 390rpx;
			position: absolute;
			left: 50%;
			top: 45%;
			transform: translate(-50%, -50%);

			.title {
				text-align: center;
				margin: 40rpx 0;
				font-size: 42rpx;
				// font-weight: 600;
				font-family: PingFang_Bold;
			}

			.inner-box {
				margin: 20rpx 20rpx 40rpx 20rpx;
				text-align: center;

				.text-tips {
					display: block;
					line-height: 70rpx;
					font-size: 36rpx;
					font-family: PingFang_Bold;
					// font-weight: bold;
					color: #89898C;
				}

				.button-box {
					text-align: center;
					margin-top: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.button-one {
						display: inline-block;
						width: 120rpx;
						height: 58rpx;
						line-height: 58rpx;
						margin: 0 40rpx 0 0;
						text-align: center;
						color: #000000;
						border: 2px solid #000000;
						border-radius: 8rpx;
						font-size: 26rpx;
						// font-weight: bold;
						// cursor: pointer;
						font-family: PingFang_Bold;
					}

					.button-two {
						background-color: #000000;
						display: inline-block;
						width: 120rpx;
						height: 58rpx;
						line-height: 58rpx;
						margin: 0 0 0 40rpx;
						text-align: center;
						color: #FFFFFF;
						border-radius: 8rpx;
						font-size: 26rpx;
						// font-weight: bold;
						// cursor: pointer;
						font-family: PingFang_Bold;
					}
				}
			}
		}
	}
</style>
